<template>
	<view class="index">
		<view class="form">
			<u-form :model="form" ref="uForm" class="u-form">
				<u-form-item prop="name" label="">
					<u-input placeholder="请输入姓名" v-model="form.name"></u-input>
				</u-form-item>
				<u-form-item prop="mobile" label="">
					<u-input placeholder="请输入手机号" v-model="form.mobile"></u-input>
				</u-form-item>
				<u-form-item prop="area_text" label="" >
					<u-input 
						placeholder="请输选择地址" 
						v-model="area_text" 
						:disabled="true"
						@click="selectCity"
					></u-input>
				</u-form-item>
				<u-form-item prop="address" label="">
					<u-input placeholder="请输入详细地址" v-model="form.address"></u-input>
				</u-form-item>
				<u-form-item prop="is_default" label="是否设置默认" label-width="200">
					<u-switch v-model="form.is_default" active-color="#ffc659"></u-switch>
				</u-form-item>
			</u-form>
			<u-button 
				type="primary"
				class="submit-button"
				@click="submit"
			>确认</u-button>
		</view>
		<s-city-select v-model="showSelect" @city-change="cityChange"></s-city-select>
		<u-toast ref="Toast"></u-toast>
	</view>
</template>

<script>
	import sCitySelect from '@/components/citySelect/u-city-select.vue'
	export default {
		props: {
			addressItem: {
				type: Object,
				default: undefined
			}
		},
		data() {
			return {
				showSelect: false,
				form: {
					name: '',
					mobile: '',
					address: '',
					is_default: false
				},
				area_text: '',
				formRules: {
					'name': [
						{
							required: true,
							message: '姓名不能为空',
							trigger: ['change','blur']
						},
						{
							max: 6,
							message: '姓名不能超过6位',
							trigger: ['change','blur']
						}
					],
					mobile: [
						{
							required: true,
							message: '手机号不能为空',
							trigger: ['change','blur']
						},
						{
							validator: (rule,value,callback)=>{
								return this.$u.test.mobile(value)
							},
							message: '手机号格式不正确',
							trigger: 'blur'
						}
					],
					address: [
						{
							required: true,
							message: '详细地址不能为空',
							trigger: ['change','blur']
						},
						{
							min: 6,
							message: '详细地址必须6位以上',
							trigger: 'blur'
						}
					],
					area_text: [
						{
							validator: (rule,value,callback)=>{
								return this.area_text != ''
							},
							message: '请选择地址',
							trigger: ['change','blur']
						}
					]
				}
			};
		},
		methods: {
			submit(){
				this.$refs.uForm.validate(validate=>{
					if(validate && this.addressItem.id === undefined)
						this.addAddress()
					if(validate && this.addressItem.id !== undefined)
						this.editAddress()
					
				})
			},
			cityChange({province,city,area}){
				this.area_text = `${province.label}-${city.label}-${area.label}`
			},
			selectCity(){
				this.showSelect = true
			},
			addAddress(){
				let is_default = this.form.is_default ? 1 : 0
				let [province_name,city_name,area_name] = this.area_text.split('-')
				return this.$api.user.addAddress({
					...this.form,
					is_default,
					province_name,
					city_name,
					area_name
				})
				.then(res=>{
					if(res.code == 1){
						this.$refs.Toast.show({
							title: '添加成功',
							type: 'success',
							callback: ()=>{
								uni.$emit('refreshAddress')
								this.$Router.back()
							}
						})
					}else{
						this.$refs.Toast.show({
							title: res.msg,
							type: 'warning'
						})
					}
				})
			},
			editAddress(){
				let is_default = this.form.is_default ? 1 : 0
				let [province_name,city_name,area_name] = this.area_text.split('-')
				return this.$api.user.editAddress({
					id: this.addressItem.id,
					...this.form,
					is_default,
					province_name,
					city_name,
					area_name
				})
				.then(res=>{
					if(res.code == 1){
						this.$refs.Toast.show({
							title: '修改成功',
							type: 'success',
							callback: ()=>{
								uni.$emit('refreshAddress')
								this.$Router.back()
							}
						})
					}else{
						this.$refs.Toast.show({
							title: res.msg,
							type: 'warning'
						})
					}
				})
			}
		},
		components: {
			sCitySelect
		},
		mounted() {
			this.$refs.uForm.setRules(this.formRules)
			this.$nextTick(()=>{
				if(this.addressItem.id === undefined) return
				let item = this.addressItem
				this.form.name = item.name
				this.form.mobile = item.mobile
				this.form.address = item.address
				this.form.is_default = item.is_default == 1 ? true:false
				this.area_text = `${item.province_name}-${item.city_name}-${item.area_name}`
			})
		}
	}
</script>

<style lang="scss" scoped>
	.index{
		background-color: $uni-bg-color;
		.form{
			padding: 0 $uni-spacing-row-lg;
			.u-form{
				margin-bottom: 62upx;
			}
			.submit-button{
				width: 654upx;
				height: 90upx;
				border-radius: 90upx;
				color: #333333;
				font-weight: bold;
			}
		}
	}
</style>
